<template>
	<div class="abnormal m-t-15 pointer" @click="alarm = true">
		<img src="@/assets/img/rd/abnormal.png" style="vertical-align: middle; margin-top: -4px" alt="" />
		<span style="font-size: 14px; color: #f45757">异常警告({{ alarmState.total }})</span>
	</div>
	<!-- <img class="camera pointer" src="@/assets/img/rd/camera.png" alt="" /> -->
	<el-dialog v-model="alarm" title="异常警告" width="60%" v-bind="$attrs">
		<MyListPanel :total="alarmState.total" :loadFn="loadData" small>
			<template #default="{ page, size }">
				<my-table size="small" height="300px" :data="alarmState.list" :columns="columns">
					<template #index="{ $index }">
						{{ $index + 1 + (page - 1) * size }}
					</template>
				</my-table>
			</template>
		</MyListPanel>
	</el-dialog>
</template>

<script setup name="MyAlarm">
import { abnormalAlarm } from '@a/drain'

/**
 * type 异常告警系统类型 (必传)
 * id 综采面ID (可选)
 * columns 异常告警表格 (可选)
 */
const props = defineProps({
	type: {
		type: String,
		required: true
	},
	id: {},
	columns: {
		type: Object,
		default: () => [
			{
				label: '序号',
				prop: 'index',
				width: 60
			},
			{
				label: '系统名',
				prop: 'systemName',
				width: 100
			},
			{
				label: '位置',
				prop: 'mechanizedFace',
				width: 100
			},
			{
				label: '设备类型',
				prop: 'deviceType',
				width: 100
			},
			{
				label: '设备ID',
				prop: 'deviceID',
				width: 150
			},
			{
				label: '告警类型',
				prop: 'alarmType',
				width: 100
			},
			{
				label: '告警描述',
				prop: 'alarmDesc'
			},
			{
				label: '告警时间',
				prop: 'alarmDateTime',
				width: 150
			}
		]
	}
})

// 异常警告数量
let alarm = ref(false),
	alarmState = reactive({
		total: 0,
		list: []
	})

// 初始化表格查询逻辑
function loadData(pageNum = 1, pageSize = 10) {
	abnormalAlarm({ pageNum, pageSize, abnormalAlarmSystem: props.type, mechanizedMiningFaceId: props.id }).then((res) => {
		alarmState.total = res.data?.total
		alarmState.list = res.data?.rows
	})
}
loadData()
</script>

<style lang="scss" scoped>
.abnormal {
	position: absolute;
	top: 1%;
	right: 1%;
	padding: 5px 10px;
	letter-spacing: 1px;
	border-radius: 4px;
	background: rgba(244, 87, 87, 0.2);
	border: 1px solid #f45757;
	box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
	span {
		margin-left: 3px;
	}
}
.camera {
	position: absolute;
	top: 12%;
	right: 1%;
}
</style>
